<section class="pipeline-list-view">
  <div class="list-content">
    <ul class="list-group checked-list-box">

      <li class="list-group-item header-list-group-item">
        <i ng-if="allSelected"
           ng-click="unSelectAll()"
           class="glyphicon glyphicon-check fa-12x header-check-box"></i>

        <i ng-if="!allSelected"
           ng-click="selectAll()"
           class="glyphicon glyphicon-unchecked fa-12x header-check-box"></i>

        <div class="stage-library-name header">
          <a ng-click="onSortColumnHeaderClick('label')">
            <span>Library Label</span>
            <i ng-if="header.sortColumn !== 'label'" class="fa fa-sort" aria-hidden="true"></i>
            <i ng-if="header.sortColumn === 'label' && !header.sortReverse" class="fa fa-arrow-down"></i>
            <i ng-if="header.sortColumn === 'label' && header.sortReverse" class="fa fa-arrow-up"></i>
          </a>
        </div>

        <div class="stage-library-id header" ng-if="showLibraryId">
          <a ng-click="onSortColumnHeaderClick('id')">
            <span>Library ID</span>
            <i ng-if="header.sortColumn !== 'id'" class="fa fa-sort" aria-hidden="true"></i>
            <i ng-if="header.sortColumn === 'id' && !header.sortReverse" class="fa fa-arrow-down"></i>
            <i ng-if="header.sortColumn === 'id' && header.sortReverse" class="fa fa-arrow-up"></i>
          </a>
        </div>

        <div class="stage-library-list header">
          <span>Stages</span>
        </div>

        <div class="stage-library-installed header">
          <a ng-click="onSortColumnHeaderClick('installed')">
            <span>Installed</span>
            <i ng-if="header.sortColumn !== 'installed'" class="fa fa-sort" aria-hidden="true"></i>
            <i ng-if="header.sortColumn === 'installed' && !header.sortReverse" class="fa fa-arrow-down"></i>
            <i ng-if="header.sortColumn === 'installed' && header.sortReverse" class="fa fa-arrow-up"></i>
          </a>
        </div>

      </li>

      <li class="list-group-item"
          ng-class="{'active-info': selectedStageLibraryMap[getStageLibraryKey(stageLibrary)]}"
          ng-repeat="stageLibrary in filteredStageLibraries | orderBy: customStageLibrarySortFunction: header.sortReverse | limitTo: limit">

        <i ng-if="selectedStageLibraryMap[getStageLibraryKey(stageLibrary)]"
           ng-click="unSelectStageLibrary(stageLibrary)"
           class="glyphicon glyphicon-check fa-12x"></i>

        <i ng-if="!selectedStageLibraryMap[getStageLibraryKey(stageLibrary)]"
           ng-click="selectStageLibrary(stageLibrary)"
           class="glyphicon glyphicon-unchecked fa-12x"></i>

        <div class="stage-library-name">
          <span>{{stageLibrary.stageLibraryManifest.stageLibLabel}} </span>
          <span class="stage-library-version"
                ng-if="stageLibrary.stageLibraryManifest.stageLibLicense === 'StreamSetsEnterprise1.0'">
            {{stageLibrary.stagelibVersion}}
          </span>
        </div>

        <div class="stage-library-id" ng-if="showLibraryId">
          <span>{{stageLibrary.stageLibraryManifest.stageLibId}}</span>
        </div>

        <div class="stage-library-list">
          <span ng-repeat="stageInfo in getStageInfoList(stageLibrary.stageLibraryManifest.stages) track by $index"
                class="badge {{stageInfo.type.toLowerCase() }}">{{stageInfo.label}}</span>
        </div>

        <div class="stage-library-installed">
          <i ng-if="stageLibrary.stageLibraryManifest.installed"
             class="fa fa-check-circle fa-12x"></i>
        </div>

        <div class="action-menu pull-right" dropdown>
              <span class="dropdown-toggle" dropdown-toggle
                    ng-click="$event.stopPropagation();">
                <i class="fa fa-ellipsis-v"></i>
              </span>
          <ul class="dropdown-menu" role="menu">

            <li role="presentation" ng-if="isAuthorized([userRoles.admin]) && !stageLibrary.stageLibraryManifest.installed && !isManagedByClouderaManager">
              <a href="#" dropdown-toggle ng-click="onInstallLibraryClick(stageLibrary, $event)">
                <i class="fa fa-plus-square"></i>
                <span>{{'packageManager.header.install' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin]) && stageLibrary.stageLibraryManifest.installed && !isManagedByClouderaManager">
              <a href="#" dropdown-toggle ng-click="onUninstallLibraryClick(stageLibrary, $event)">
                <i class="fa fa-minus-square"></i>
                <span>{{'packageManager.header.uninstall' | translate}}</span>
              </a>
            </li>

          </ul>
        </div>

      </li>

      <li class="list-group-item center-align" ng-if="filteredStageLibraries.length === 0 && !fetching">
        <span translate="packageManager.noStageLibrary"></span>
      </li>

      <li class="list-group-item center-align" ng-if="limit < filteredStageLibraries.length && !fetching">
        <a class="btn btn-default"
           ng-click="onShowMoreClick($event);">{{'global.form.showMore' | translate}}</a>
      </li>

      <div class="stage-libraries-loading">
        <div class="pipeline-home-loading" show-loading="fetching"></div>
      </div>


    </ul>

  </div>
</section>
